<template>
  <div class="article-container darcula-theme">
    <!-- 标题区 -->
    <header class="article-header">
      <h1 class="title">{{ post?.title }}</h1>
      <div class="meta">
        <span class="date">{{ post?.publishTime }}</span>
        <el-tag v-for="(tag, i) in post?.tags" :key="i" effect="dark" type="info" size="small">
          {{ tag }}
        </el-tag>
      </div>
    </header>

    <!-- Markdown内容 -->
    <article class="markdown-body">
      <MdPreview :id="post?.title" :modelValue="post?.content" />
      <MdCatalog :editorId="post?.title" :scrollElement="scrollElement" />
    </article>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ArchivesPageVO } from "@/api/system/archives";
import { useRoute } from "vue-router";
import BlogAPI from "@/api/blog/blog";
import { MdPreview, MdCatalog } from "md-editor-v3";
// preview.css相比style.css少了编辑器那部分样式
import "md-editor-v3/lib/preview.css";

// 路由参数获取
const route = useRoute();
// 路由类型参数
const aid = ref(0);
// 文章结果
const post = ref<ArchivesPageVO>();
const scrollElement = document.documentElement;

function getDetail() {
  BlogAPI.getArchiveById(aid.value).then((data) => {
    post.value = data;
  });
}

watch(
  () => route.query,
  (query) => {
    aid.value = query.aid;
    if (query.aid != undefined) {
      getDetail();
    }
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
.markdown-body {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 25px;
  image {
    margin: 0 auto; // 居中显示
  }
}
@media (max-width: 767px) {
  .markdown-body {
    padding: 15px;
  }
}
.darcula-theme {
  // Darcula基础配色
  --bg-color: #2b2b2b;
  --text-color: #a9b7c6;
  --border-color: #3d3d3d;
  --code-bg: #1c1c1c;
  --link-color: #6897bb;
  --title-color: #cc7832;
  --title-h1-color: #7832cc;
  --title-h2-color: #9876aa;
}

// 修改容器布局
.article-container {
  max-width: 1200px; // 增加最大宽度限制
  padding: 5rem 1rem; // 调整左右内边距
  margin: 0 auto; // 保持居中
  color: var(--text-color);
  border-radius: 4px;
}

.article-header {
  max-width: 980px; // 与markdown内容区同宽
  margin: 0 auto; // 保持居中
  padding: 0 1rem 1.5rem; // 增加左右内边距
  border-bottom: 1px solid var(--border-color);

  .title {
    color: var(--title-color);
    font-size: 2.2rem;
    margin-bottom: 1rem;
  }

  .meta {
    display: flex;
    align-items: center;
    gap: 1rem;

    .date {
      color: #808080;
    }
  }
}
// 调整移动端布局
@media (max-width: 767px) {
  .article-container {
    padding: 1rem;
  }
  .article-header {
    padding: 0 1rem 1rem;
    .title {
      font-size: 1.8rem;
    }
  }
}

// Markdown内容样式
.markdown-body {
  background-color: var(--bg-color);
  padding: 10px 15px;
  :deep() {
    .md-editor-preview {
      background-color: var(--bg-color);
      color: #fff;
    }

    h1 {
      color: var(--title-h1-color);
    }

    h2 {
      color: var(--title-h2-color);
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 0.3em;
    }

    h3 {
      color: var(--text-color);
    }

    code:not([class*="language-"]) {
      background: var(--code-bg);
      color: #a9b7c6;
      padding: 2px 4px;
      border-radius: 3px;
    }

    pre {
      background: var(--code-bg) !important;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 1rem;

      code {
        background: transparent !important;
      }
    }

    blockquote {
      color: #808080;
      border-left: 4px solid var(--border-color);
      padding-left: 1rem;
      margin: 1rem 0;
    }

    table {
      border-collapse: collapse;

      th,
      td {
        border: 1px solid var(--border-color);
        padding: 6px 13px;
      }

      th {
        background: #363636;
      }
    }

    a {
      color: var(--link-color);

      &:hover {
        color: #6897bb;
      }
    }
  }
}
</style>
